<template>
  <div>
    <div class="detail-info" style="margin-top: 50px">
      <div class="form-item">
        <h4>费用基本信息</h4>
        <el-form :model="infoForm" label-width="180px">
          <el-form-item label="分公司">
            <el-select v-model="infoForm.branchId" v-if="isBranch" style="width: 180px" @change="getDeptList" @visible-change="visibleChange" filterable>
              <el-option
                v-for="item in branchList"
                :label="item.branch_Name"
                :value="item.branch_Id">
              </el-option>
            </el-select>
            <el-input v-if="!isBranch" v-model="branchName" style="width: 220px" disabled></el-input>
          </el-form-item>
          <el-form-item label="所属部门">
            <el-select v-model="infoForm.departmentId" v-if="isBranch" style="width: 180px" filterable>
              <el-option
                v-for="item in deptList"
                :value="item.org_id"
                :label="item.org_name">
              </el-option>
            </el-select>
            <el-input v-if="!isBranch" v-model="orgName" style="width: 220px" disabled></el-input>
          </el-form-item>
          <!--<el-form-item label="分公司">-->
            <!--<el-input v-model="this.branchName" style="width: 220px" disabled></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="所属部门">-->
            <!--<el-input v-model="this.orgName" style="width: 220px" disabled></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="促销费用名称" required>
            <el-input v-model="infoForm.promotionName" style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="费用类型">
            <el-radio-group v-model="infoForm.promotionType">
              <el-radio :label="1">惠民全担</el-radio>
              <el-radio :label="2">惠民及供货商</el-radio>
              <el-radio :label="3">供货商全担</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="供货商" v-if="infoForm.promotionType !== 1" required>
            <el-select v-model="infoForm.supplyFactory" filterable clearable>
              <el-option
              v-for="item in this.supplierList"
              :label="item.providerShortName"
              :value="item.hmProviderId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="促销周期">
            <el-date-picker
              :editable="false"
              v-model="infoForm.time1"
              type="daterange"
              value-format="yyyy-MM-dd"
              @change="time1Change"
              placeholder="选择日期范围">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="补偿方式" v-if="infoForm.promotionType !== 1">
            <el-radio-group v-model="infoForm.payMode">
              <el-radio :label="1">货币补偿</el-radio>
              <el-radio :label="2">货物补偿</el-radio>
              <el-radio :label="3">抵货款</el-radio>
              <el-radio :label="4">增账余</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="补偿周期" v-if="infoForm.promotionType !== 1">
            <el-date-picker
              :editable="false"
              v-model="infoForm.time2"
              value-format="yyyy-MM-dd"
              type="daterange"
              @change="time2Change"
              :picker-options="pickerOptions"
              placeholder="选择日期范围">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-item">
        <el-form label-width="180px">
          <h4>备注</h4>
          <el-input  type="textarea" v-model="infoForm.remark" style="width: 500px"></el-input>
        </el-form>
      </div>
    </div>
    <div style="margin: 20px auto; width: 17%">
      <el-button @click="submit" type="success">提交</el-button>
      <el-button @click="submit" type="warning">暂存</el-button>
      <el-button @click="cancel" type="danger">取消</el-button>
    </div>
  </div>
</template>
<script>
  import { getInfo, activity } from '../../../config/proxy.js'
  import { mapState } from 'vuex'
  import mixins from '../../../components/mixins.vue'
  export default {
    mixins: [mixins],
    data () {
      const self = this
      return {
        deptList: [],
        visible: false,
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < new Date(self.infoForm.promotionEndTime).getTime()
          }
        },
        pickerOptions2: {
          disabledDate (time) {
            return time.getTime() < new Date().getTime()
          }
        },
        infoForm: {
          branchId: '',
          departmentId: '',
          time1: [],
          time2: [],
          promotionName: '',
          promotionType: 1,
          supplyFactory: '',
          payMode: 1,
          remark: ''
        }
      }
    },
    methods: {
      getDeptList (val) {
        if (this.visible === true) {
          this.infoForm.departmentId = ''
        }
        var _data = {}
        this.branchList.forEach(item => {
          if (val === item.branch_Id) {
            _data.orgId = item.org_id
            this.infoForm.bid = item.org_id
          }
        })
        getInfo.department(_data, (res) => {
          if (res.message === 'ok') {
            if (val === 1) {
              this.deptList = []
              res.content.forEach(element => {
                if (element.org_name.indexOf('公司') === -1) {
                  this.deptList.push(element)
                }
              })
              this.matchDept()
            } else {
              this.deptList = res.content
              this.matchDept()
            }
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },  // 获取部门
      matchDept () { // 匹配 当前登录人的部门与部门列表
        for (let index = 0; index < this.deptList.length; index++) {
          const element = this.deptList[index]
          if (Number(this.infoForm.departmentId) === Number(element.org_id)) {
            return
          } else {
            if (index === this.deptList.length - 1) {
              this.infoForm.departmentId = ''
            }
          }
        }
      },
      visibleChange (val) {
        this.visible = val
      },
      time1Change (val) {
        this.infoForm.promotionBeginTime = val[0]
        this.infoForm.promotionEndTime = val[1]
      },      // 促销周期
      time2Change (val) {
        this.infoForm.payBeginTime = val[0]
        this.infoForm.payEndTime = val[1]
      },      // 补偿周期
      editInto (detailData) {
        this.infoForm.branchId = detailData.branchId
        this.infoForm.bid = detailData.bId
        this.infoForm.departmentId = detailData.departmentId
        this.infoForm.promotionName = detailData.promotionName
        this.infoForm.remark = detailData.remark
        this.infoForm.id = detailData.id
        this.infoForm.time1[0] = detailData.promotionBeginTime
        this.infoForm.time1[1] = detailData.promotionEndTime
        this.infoForm.promotionBeginTime = detailData.promotionBeginTime
        this.infoForm.promotionEndTime = detailData.promotionEndTime
        if (detailData.promotionType !== 1) {
          this.infoForm.promotionType = detailData.promotionType
          this.infoForm.supplyFactory = detailData.supplyFactoryId
          this.infoForm.payMode = detailData.payMode
          this.infoForm.time2[0] = detailData.payBeginTime
          this.infoForm.time2[1] = detailData.payEndTime
          this.infoForm.payBeginTime = detailData.payBeginTime
          this.infoForm.payEndTime = detailData.payEndTime
        }
      },  // 数据回显
//    按钮组
      cancel () {
        if (this.detailData) {
          this.$store.dispatch('delTab', {id: 'fy_edit'})
        } else {
          this.$store.dispatch('delTab', {id: 'fy_add'})
        }
      },
      submit (event) {
        const handleName = event.target.innerText
        handleName === '暂存' ? this.infoForm.chargeState = 1 : this.infoForm.chargeState = 2
        if (this.detailData) {
          if (this.infoForm.promotionName === '') {
            this.$message({
              showClose: true,
              message: '请输入促销名称',
              type: 'error'
            })
            return false
          }
          if (this.infoForm.promotionType !== 1) {
            if (this.infoForm.supplyFactory === '') {
              this.$message({
                showClose: true,
                message: '请选择供应商',
                type: 'error'
              })
              return false
            }
            if (this.infoForm.time1.length === 0) {
              this.$message({
                showClose: true,
                message: '请选择促销周期',
                type: 'error'
              })
              return false
            }
            if (this.infoForm.time2.length === 0) {
              this.$message({
                showClose: true,
                message: '请选择补偿周期',
                type: 'error'
              })
              return false
            }
          } else {
            this.infoForm.supplyFactory = 0
            this.infoForm.payMode = ''
            if (this.infoForm.time1.length === 0) {
              this.$message({
                showClose: true,
                message: '请选择促销周期',
                type: 'error'
              })
              return false
            }
          }
          console.log(this.infoForm, '编辑提交的数据')
          activity.cxfy.edit(this.infoForm, res => {
            if (res.message === 'ok') {
              this.$store.dispatch('delTab', {id: 'fy_edit'})
              this.$store.dispatch('cxfyState', this.$store.state.updateState.cxfyState + 1)
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error'
              })
            }
          })
        } else {
          if (this.infoForm.promotionName === '') {
            this.$message({
              showClose: true,
              message: '请输入促销名称',
              type: 'error'
            })
            return false
          }
          if (this.infoForm.promotionType !== 1) {
            if (this.infoForm.supplyFactory === '') {
              this.$message({
                showClose: true,
                message: '请选择供应商',
                type: 'error'
              })
              return false
            }
            if (this.infoForm.time1.length === 0) {
              this.$message({
                showClose: true,
                message: '请选择促销周期',
                type: 'error'
              })
              return false
            }
            if (this.infoForm.time2.length === 0) {
              this.$message({
                showClose: true,
                message: '请选择补偿周期',
                type: 'error'
              })
              return false
            }
          } else {
            this.infoForm.supplyFactory = 0
            this.infoForm.payMode = ''
            if (this.infoForm.time1.length === 0) {
              this.$message({
                showClose: true,
                message: '请选择促销周期',
                type: 'error'
              })
              return false
            }
          }
          console.log(this.infoForm, '提交的数据')
          activity.cxfy.creation(this.infoForm, res => {
            if (res.message === 'ok') {
              this.$store.dispatch('delTab', {id: 'fy_add'})
              this.$store.dispatch('cxfyState', this.$store.state.updateState.cxfyState + 1)
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error'
              })
            }
          })
        }
      }
    },
    computed: mapState({
      userName: function (state) {
        return state.user.info.user_name
      },
      orgName: function (state) {
        return state.user.info.parOrgName
      },
      orgId: function (state) {
        return state.user.info.or_org_id
      },
      branchName: function (state) {
        return state.user.info.branchId === 1 ? '总公司' : state.user.info.branchName
      },
      branchId: function (state) {
        return state.user.info.branchId
      },
      bid: function (state) {
        return state.user.info.branchOrgId
      }
    }),
    watch: {
      branchList (a, b) {
        this.getDeptList(this.infoForm.branchId)
      }
    },
    created () {
      this.infoForm.branchId = this.branchId
      this.infoForm.bid = this.bid
      this.infoForm.departmentId = this.orgId
      this.infoForm.appliPerson = this.userName
      this.detailData = this.$store.state.tab.uid
      if (this.detailData !== undefined) {
        console.log(this.detailData, '费用详情')
        this.editInto(this.detailData)
      }
    }
  }
</script>
<style>
</style>
